<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head>
        <title>Float and Clear</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
    </head>

    <body>
        <h1>Float and Clear</h1>
        <div>
            <div class="box1_cls left_cls clear_left">Float Left</div> 
            <div class="box2_cls right_cls               ">Float Right</div>
            <!--                         ^^clear_right^^ - not necessary -->
            <p class="clear_none">This paragraph does NOT clear floats.

            <span class="box1_cls right_cls clear_right">Float Right - cleared right</span>
            <span class="box2_cls right_cls clear_none">Float Right - NOT cleared</span></p>

            <p class="clear_left">This paragraph clears floats on its left side.</p>

            <div class="box1_cls left_cls clear_left">Float Left - cleared left</div>
            <div class="box2_cls left_cls clear_none">Float Left - NOT cleared</div>

            <p class="clear_right">This paragraph clears floats on its right side. 
            <span class="box1_cls left_cls clear_left">Float Left, clear left</span> 
            <span class="box2_cls right_cls clear_right">Float Right, clear right</span></p>

            <p class="clear_both">This paragraph clears floats on both sides.</p>

        </div>
    </body>
</html>
